<template>
	<view>
		<view class="container">
			<!-- #ifdef MP -->
			<view class="nav" :style="{paddingTop:statusH+'px'}">
				<image @click="goBack()" src="/static/tell_left.png" mode=""></image>
				<view class="title">托管</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="nav">
				<image @click="goBack()" src="/static/tell_left.png" mode=""></image>
				<view class="title">托管</view>
			</view>
			<!-- #endif -->
			<view class="box">
				<view class="data_title">
					<image src="/static/tg_icon_1.png" mode=""></image>
					<text>截止至{{info.now_time}}累计</text>
				</view>
				<view class="data_list">
					<view class="data_item data1">
						<view class="title">托管用户(位)</view>
						<view class="num">{{info.pt_user_nums}}</view>
					</view>
					<view class="data_item data2">
						<view class="title">总价值(万元)</view>
						<view class="num">{{info.pt_price_total}}</view>
					</view>
					<view class="data_item data3">
						<view class="title">累计收益(万元)</view>
						<view class="num">{{info.pt_shouji_total}}</view>
					</view>
				</view>
				<view class="data_sy">
					<view class="sy_tx" @click="$utils.navigateTo('bill/withdraw')">提现</view>
					<image class="sy_vip" src="/static/tg_icon_2.png" mode=""></image>
					<image class="sy_bg" :src="tg_bg_img" mode=""></image>
					<view class="sy_box">
						<view class="sy_num1">
							<view class="sy_tit">累计收益</view>
							<view class="sy_num">{{info.my_shouji_total}}</view>
						</view>
						<view class="sy_list">
							<view class="sy_item">
								<view class="i_title">提现中</view>
								<view class="i_num">{{info.my_tixian_ing}}</view>
							</view>
							<view class="sy_item">
								<view class="i_title">余额</view>
								<view class="i_num">{{info.my_blance}}</view>
							</view>
							<view class="sy_item">
								<view class="i_title">免押额度</view>
								<view class="i_num">{{info.my_quota}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="data_box">
					<view class="box_title">常用工具</view>
					<view class="box_l">
						<view class="l_item" @click="$utils.navigateTo('tuoguan/devices')">
							<image style="width: 80rpx;height: 45.71rpx;" :src="tg_icon_3" mode=""></image>
							<view class="text">我的设备</view>
						</view>
						<view class="l_item" @click="$utils.navigateTo('tuoguan/chuzu')">
							<image style="width: 60rpx;height: 43.5rpx;" :src="tg_icon_4" mode=""></image>
							<view class="text">出租记录</view>
						</view>
						<view class="l_item" @click="$utils.navigateTo('news/page',{ id: 6 })">
							<image style="width: 60rpx;height: 60rpx;" :src="tg_icon_5" mode=""></image>
							<view class="text">托管流程</view>
						</view>
					</view>
				</view>
				<view class="data_box">
					<view class="box_l">
						<view class="l_item" @click="$utils.navigateTo('news/page',{ id: 7 })">
							<image style="width: 60rpx;height: 67.61rpx;" :src="tg_icon_6" mode=""></image>
							<view class="text">托管答疑</view>
						</view>
						<view class="l_item" @click="$utils.navigateTo('news/page',{ id: 5 })">
							<image style="width: 60rpx;height: 60rpx;" :src="tg_icon_7" mode=""></image>
							<view class="text">托管协议</view>
						</view>
						<view class="l_item" @click="$utils.navigateTo('news/page',{ id: 5 })">
							<!-- <image style="width: 60rpx;height: 60rpx;" src="/static/tg_icon_7.png" mode=""></image> -->
							<view style="background-color: #fff;width: 60px;height: 60px;"></view>
							<view class="text"></view>
						</view>
						<!-- <view class="l_item">
							<image style="width: 60rpx;height: 54.29rpx;" src="/static/tg_icon_8.png" mode=""></image>
							<view class="text">排行榜</view>
						</view> -->
					</view>
				</view>
				<view class="tg_btn"  @click="$utils.navigateTo('tuoguan/home')">去托管</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/config";
	export default {
		data() {
			return {
				info:[],
				tg_bg_img:config.uni_app_web_url + 'static/h5/tg_bg.png',
				tg_icon_3:config.uni_app_web_url + 'static/h5/tg_icon_3.png',
				tg_icon_4:config.uni_app_web_url + 'static/h5/tg_icon_4.png',
				tg_icon_5:config.uni_app_web_url + 'static/h5/tg_icon_5.png',
				tg_icon_6:config.uni_app_web_url + 'static/h5/tg_icon_6.png',
				tg_icon_7:config.uni_app_web_url + 'static/h5/tg_icon_7.png',
				statusH:this.$storage.get("statusH")
			}
		},
		onLoad() {
			this.$http.getTuoguan({
			}).then((result) => {
				console.log(result, 'this.huodong ')
				this.info = result.data
			}).catch(err => {
			
			});
		},
		onBackPress(e) {
			console.log(e);
			//this.$utils.switchTab('ucenter/index');
			this.$utils.reLaunch('ucenter/index');
			return true;
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #F7FEFF;
	}
	.container {
		.nav{
			padding: 47rpx 39rpx;
			display: flex;
			align-items: center;
			background: linear-gradient( 134deg, rgba(209,240,241,0.9846) 0%, #78C0F9 59%, #BBE0FC 100%);
			image{
				width: 42rpx;
				height: 47rpx;
			}
			.title{
				margin-left: -42rpx;
				flex: 1;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
		.box{
			padding: 29rpx 32rpx;
			.data_title{
				display: flex;
				align-items: center;
				image{
					width: 28rpx;
					height: 28rpx;
				}
				text{
					padding-left: 10rpx;
					font-weight: 600;
					font-size: 28rpx;
					color: #84E7E4;
				}
			}
			.data_list{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.data1{
					background: linear-gradient( 138deg, #FFFFFF 0%, #FFEFEF 100%);
				}
				.data2{
					background: linear-gradient( 138deg, #FFFFFF 0%, #EFFFF3 100%);
				}
				.data3{
					background: linear-gradient( 137deg, #FFFFFF 0%, #FCF3FF 100%);
				}
				.data_item{
					text-align: center;
					padding: 19rpx 36rpx;
					box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141,191,252,0.5);
					border-radius: 24rpx;
					.title{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
					.num{
						font-weight: 700;
						font-size: 36rpx;
						color: #3B76FF;
						margin-top: 10rpx;
					}
				}
			}
			.data_sy{
				margin-top: 30rpx;
				border-radius: 20rpx;
				height: 270rpx;
				position: relative;
				.sy_tx{
					width: 105rpx;
					height: 46rpx;
					background: linear-gradient( 133deg, #F09974 0%, #E77F7C 100%);
					border-radius: 0rpx 20rpx 0rpx 20rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 46rpx;
					text-align: center;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 9;
				}
				.sy_vip{
					position: absolute;
					top: 12rpx;
					right: 106rpx;
					width: 149rpx;
					height: 126rpx;
					z-index: 2;
				}
				.sy_bg{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}
				.sy_box{
					position: absolute;
					left: 0;
					top: 0;
					width: calc(100% - 58rpx);
					height: calc(100% - 48rpx);
					z-index: 2;
					padding: 21rpx 29rpx 27rpx 29rpx;
					.sy_num1{
						color: #932C00;
						.sy_tit{
							font-weight: 400;
							font-size: 24rpx;
							width: 100px;
						}
						.sy_num{
							margin-top: 25rpx;
							font-weight: 700;
							font-size: 36rpx;
						}
					}
					.sy_list{
						margin-top: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.sy_item{
							.i_title{
								font-weight: 400;
								font-size: 24rpx;
								color: #932C00;
							}
							.i_num{
								margin-top: 20rpx;
								font-weight: 700;
								font-size: 36rpx;
								color: #932C00;
							}
						}
					}
				}
			}
			
			.data_box{
				margin-top: 30rpx;
				padding: 23rpx 27rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141,191,252,0.5);
				border-radius: 24rpx;
				.box_title{
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.box_l{
					padding: 0 20rpx;
					margin-top: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.l_item{
						text-align: center;
						.text{
							font-weight: 400;
							font-size: 24rpx;
							color: #3D3D3D;
							margin-top: 25rpx;
						}
					}
				}
			}
			.tg_btn{
				margin: 40rpx auto 0 auto;
				width: 400rpx;
				height: 80rpx;
				background: linear-gradient( 116deg, #F2EBFF 0%, #D1F0F1 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141,191,252,0.5);
				border-radius: 120rpx 120rpx 120rpx 120rpx;
				border: 1rpx solid #3B76FF;
				font-weight: 400;
				font-size: 36rpx;
				color: #3B76FF;
				line-height: 80rpx;
				text-align: center;
			}
		}
		
		
		
		
		
		
		
		
		
		
	}
</style>